<template>
  <div>
    <div class="item-top">
      <!-- 左边 -->
      <slot name="left"></slot>
      <!-- 右边 -->
      <div v-show="!superSearch" v-if="showSearch">
        <slot name="right">
          <el-input v-model="keyword" :placeholder="placeholder" size="mini" style="width:150px;margin-right:10px"></el-input>
          <el-button type="primary" size="mini" @click="$emit('search',keyword)">搜索</el-button>
          <el-button type="success" size="mini" @click="superSearch = true" v-if="showSuperSearch">高级搜索</el-button>
        </slot>
      </div>
    </div>
    <!-- 高级搜索 -->
    <el-card v-show="superSearch" class="card">
      <div slot="header" class="card-header">
        <span style="font-size:14px">高级搜索</span>
        <el-button type="text" @click="closeSuperSearch">收起</el-button>
      </div>
      <!-- 表单 -->
      <slot name="form"></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    // 控制是否显示搜索
    showSearch: {
      type: Boolean,
      default: true
    },
    // 控制是否显示高级搜索按钮
    showSuperSearch: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return {
      keyword: '',
      superSearch: false // 控制是否展开高级搜索
    }
  },
  methods: {
    closeSuperSearch(){
      this.superSearch = false
    }
  }
}
</script>

<style>
.el-card__header{
  padding: 6px 20px !important;
}
</style>

<style scoped>
.item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card{
  margin-top: 15px;
}
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>